import React, { Component } from 'react'
import * as echarts from 'echarts'
import moment from 'moment'
import Pts from 'prop-types'
export default class Welcome extends Component {
  static defaultProps = {
    id: '请输出id',
    text: '请输入主标题',
    name: '请输入名称',
    data: [],
    h: '300px',
    w: '25%',
    legend: true
  }
  static propTypes = {
    id:Pts.string.isRequired,
    text:Pts.string.isRequired,
    name:Pts.string.isRequired,
    data:Pts.array.isRequired,
    legend:Pts.bool
  }
  render() {
    var chartDom = document.getElementById(this.props.id)
    if (chartDom) {
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: this.props.text,
          subtext: '截止: ' + moment().format('YYYY-MM-DD'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}：{c} ({d}%)'
        },
        series: [
          {
            name: this.props.name,
            type: 'pie',
            radius: '50%',
            data: this.props.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      // 是否显示图例
      if (this.props.legend) {
        option.legend = {
          orient: 'vertical',
          left: 'left'
        }
      }

      option && myChart.setOption(option)
    }

    return (
      <div
        id={this.props.id}
        style={{ height: this.props.h, width: this.props.w }}
      ></div>
    )
  }
}
